<template>
  <bm-control>
    <baidu-map class="map" id="mapID" center="北京市" :zoom="zoom" :scroll-wheel-zoom="true" @click="getPoint" >
      <bm-control class="result">
        <span>搜索</span>
        <el-input style="margin-left: 10px;margin-top: 5px;width: 200px"
                placeholder="搜索地名等关键字"
                v-model="keyword">
        </el-input>
      </bm-control>

      <!--地图类型，两种：一种是路线一种是绿的那种-->
      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-map-type>
      <!--地图搜索功能，绑定上面的input，-->
      <bm-local-search :keyword="keyword" :auto-viewport="true" :location="location" zoom="12.8" style="display: none"></bm-local-search>
      <!--定位-->
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>

      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>

      <bm-marker :position="postionMap" >
        <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen" style="font-size: 14px">
          <p>地点：{{ add.siteName.title }}</p>
          <p>地点地址：{{ add.site }}</p>
          <el-button style="margin-left: 180px" size="small" type="warning" @click="btnClick(add)">确定</el-button>
        </bm-info-window>
      </bm-marker>
    </baidu-map>

  </bm-control>

</template>

<script>

  export default {
    data() {
      return {
        jgNameDialog: false,
        show: false,
        postionMap: {  //地图坐标
          lng: 116.404,
          lat: 39.915
        },
        location: '',
        keyword: '',  //搜索框关键词
        zoom: 15,   //放大比例
        address: '',   //位置详细信息
        add: {
          siteName: {},
          site: '',
          jd: '',
          wd: '',
          desce: '',
          type: '',
          jgName: '',
          jgNum: '',
        },
        organizationData: [],
        jgName: '',
        jgNum: '',

      }
    },

    methods: {
      getPoint(e) {    //点击地图获取一些信息，
        this.show = true;
        this.postionMap.lng = e.point.lng;     //通过  e.point.lng获取经度
        this.postionMap.lat = e.point.lat;     //通过  e.point.lat获取纬度
        this.add.jd = e.point.lng;
        this.add.wd = e.point.lat;
        this.zoom = e.target.getZoom()
        let geocoder= new window.BMap.Geocoder();  //创建地址解析器的实例
        geocoder.getLocation(e.point,rs=>{
          this.add.site = rs.surroundingPois[0].address;
          this.add.siteName=rs.surroundingPois[0];
        });

      },
      infoWindowClose() {
        this.show = false
      },
      infoWindowOpen() {
        //这里有个问题纠结了很久，百度的信息窗口默认有个点击其他地方就消失的事件，我没有找到
        //并且信息窗口点击一次显示，一次消失
        //于是我加了一个100毫秒的定时器，保证每次点击地图都可以展示信息窗口
        setInterval(() => {
          this.show = true
        }, 100)
      },

      //组件发射消息
      btnClick:function (add) {
        console.log("孩子"+add);
        this.$emit("addressAddByChild",add);
      }
    }
  }
</script>

<style scoped>
  .map {
    width: 800px;
    height: 400px;
  }
  .result{
    padding: 7px 10px;
    position: fixed;
    top: 10px;
    left: 20px;
    width: 240px;
    background: #F4F6F6;
    box-shadow: 0 2px 6px 0 #17202A;
    border-radius: 7px;
    z-index: 99;
  }
</style>